<template>
  <div class="place-page-list flex flex-column">
    <antd-form
      v-model="formData"
      :options="formOptions"
      @submit="() => $refs.table.load()"
      class="flex-fixed"
      style="margin-bottom: 15px"
    />
    <vex-table
      class="flex-auto-height"
      ref="table"
      :columns="columns"
      :show-toolbar="false"
      :fetch-params="paramsData"
      :fetch="getTableAsync"
      @vue:mounted="() => $refs.table.load()"
    />
  </div>
</template>

<script>
import VexTable from '@gis/lib/components/vex-table/index.vue';
import { handleCommonRes, handleTableRes } from '@gis/lib/utils/resolver.js';
import { dwPageList, getDwTypeList } from '@gis/lib/api';
import { useUserInfoStore } from '@gis/lib/pinia/userInfo.js';

export default {
  name: 'place-page-list',
  components: { VexTable },
  data() {
    return {
      formData: {},
      typeList: [],
      columns: [
        { title: '类型', dataIndex: 'category_name' },
        { title: '名称', dataIndex: 'name' },
        { title: '地址', dataIndex: 'address' },
        { title: '负责人', dataIndex: 'manager_name' },
        { title: '联系电话', dataIndex: 'manager_phone' },
      ],
    };
  },
  computed: {
    paramsData() {
      const { area_code } = useUserInfoStore();
      return Object.assign({}, { area_code: area_code }, this.formData);
    },
    formOptions() {
      return [
        {
          component: 'a-select',
          label: '类别',
          field: 'type_code',
          props: {
            options: this.typeList,
            fieldNames: { label: 'category_name', value: 'category' },
          },
        },
        {
          component: 'a-input',
          label: '名称',
          field: 'name',
        },
        {
          component: 'a-input',
          label: '负责人',
          field: 'manager_name',
        },
      ];
    },
  },
  created() {
    this.getTypeList();
  },
  methods: {
    async getTableAsync(params) {
      return await handleTableRes(dwPageList, params);
    },
    async getTypeList() {
      const data = await handleCommonRes(getDwTypeList, { type: 6 });
      this.typeList = data;
    },
  },
};
</script>

<style scoped lang="less">
.place-page-list {
  width: 100%;
  height: 100%;
}
</style>
